<script setup lang="ts">
import {message, notification} from "ant-design-vue";
import {ref} from "vue";
import registerApi from '@/api/register.ts'
const otherLogin = (loginType:string)=> {
  notification['warning']({
    message: 'Waring',
    description:
        '该注册方式暂未开放',
  });
}

// 注册
const user = ref({
  userType: 'sys_user',
  username: 'test2',
  password: '123456',
  confirmPassword: '123456',
  agreement: false
})
const registerForm = ref()
const register =async ()=> {
  registerForm.value.validate()
      .then(async () => {
        if (!user.value.agreement) {
          message.warning('请先同意用户协议');
          return
        }
        const result = await registerApi.register(user.value)
        if (result.code == 200) {
          // 重置表单字段
          registerForm.value.resetFields();
          // 手动清空 user 对象
          user.value = {
            userType: 'sys_user',
            username: '',
            password: '',
            confirmPassword: '',
            agreement: false,
          };
          message.success({ content: '注册成功', duration: 2 });
        }else {
          message.success({ content: result.msg, duration: 2 });
        }
      })
      .catch((e) => {
        console.log(e.msg)
        message.error({content: e.msg, duration: 2})
      })
}
// 校验规则
const rules: Record<string, Rule[]> = {
  username: [{ required: true,message:'请输入用户名', trigger: 'change' }],
  password: [{ required: true,message:'请输入密码', trigger: 'change' }],
  confirmPassword: [{ required: true,message:'请输入密码', trigger: 'change' }],
};
</script>

<template>
  <div class="register">
    <a-form
        :model="user"
        :rules="rules"
        ref="registerForm">
      <a-form-item name="username">
        <a-input placeholder="用户名" v-model:value="user.username" allowClear>
          <template #prefix>
            <user-outlined  style="color: rgb(163, 170, 181)"/>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="password">
        <a-input type="password" placeholder="密码" show-password v-model:value="user.password" allowClear>
          <template #prefix>
            <LockOutlined  style="color: rgb(163, 170, 181)"/>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="confirmPassword">
        <a-input type="password" placeholder="确认密码" show-password v-model:value="user.confirmPassword" allowClear>
          <template #prefix>
            <LockOutlined  style="color: rgb(163, 170, 181)"/>
          </template>
        </a-input>
      </a-form-item>
      <a-checkbox v-model:checked="user.agreement">
        我已同意阅读<a>用户协议</a>和<a>隐私条款</a>
      </a-checkbox>
      <a-button type="primary" style="width: 100%;margin: 20px 0" @click="register">注册</a-button>
      <div style="text-align: center;margin-bottom:10px;color: rgb(138, 135, 148)">其他登陆方式</div>
      <div class="other-login">
        <MobileOutlined style="cursor: pointer;" @click="otherLogin('mobileLogin')"/>
        <WechatOutlined style="color: rgb(22, 163, 74);margin: 0 20px;cursor: pointer"
          @click="otherLogin('wechatLogin')"
        />
        <QqOutlined style="color: rgb(59, 130, 246);cursor: pointer" @click="otherLogin('qqLogin')"/>
      </div>
    </a-form>
  </div>
</template>
<style scoped lang="scss">
.register{
  width: 400px;
  height: 200px;
  //background-color: red;
  .other-login{
    text-align: center;
    font-size: 25px;
  }
}
</style>
